{% extends 'base.html' %}
{% load static %}

{% block title %}订单详情 - 电影院票务管理系统{% endblock %}

{% block content %}
<div class="row">
    <div class="col-12">
        <!-- 购票成功提示 -->
        {% if order.status == 'pending' %}
            <div class="alert alert-success alert-dismissible fade show mb-4" role="alert">
                <i class="fas fa-check-circle me-2"></i>
                <strong>购票成功！</strong> 您的订单已创建，请及时完成支付。
                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
            </div>
        {% endif %}
        
        <h2 class="mb-4"><i class="fas fa-receipt me-2"></i>订单详情</h2>
        
        <!-- 订单信息 -->
        <div class="card mb-4">
            <div class="card-header">
                <h5 class="mb-0"><i class="fas fa-info-circle me-2"></i>订单信息</h5>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-6">
                        <p><strong>订单号：</strong>{{ order.order_id }}</p>
                        <p><strong>创建时间：</strong>{{ order.created_at|date:"Y年m月d日 H:i:s" }}</p>
                        <p><strong>订单状态：</strong>
                            {% if order.status == 'pending' %}
                                <span class="badge bg-warning">待支付</span>
                            {% elif order.status == 'paid' %}
                                <span class="badge bg-success">已支付</span>
                            {% elif order.status == 'completed' %}
                                <span class="badge bg-info">已完成</span>
                            {% else %}
                                <span class="badge bg-secondary">已取消</span>
                            {% endif %}
                        </p>
                    </div>
                    <div class="col-md-6">
                        <p><strong>总金额：</strong><span class="text-primary fw-bold">¥{{ order.total_amount }}</span></p>
                        <p><strong>座位数量：</strong>{{ order.seats.count }}个</p>
                        <p><strong>更新时间：</strong>{{ order.updated_at|date:"Y年m月d日 H:i:s" }}</p>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 电影信息 -->
        <div class="card mb-4">
            <div class="card-header">
                <h5 class="mb-0"><i class="fas fa-film me-2"></i>电影信息</h5>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-3">
                        <img src="{% if order.screening.movie.poster %}{{ order.screening.movie.poster.url }}{% else %}{% static 'images/default-poster.jpg' %}{% endif %}" 
                             class="img-fluid rounded" alt="{{ order.screening.movie.title }}">
                    </div>
                    <div class="col-md-9">
                        <h5>{{ order.screening.movie.title }}</h5>
                        <p class="text-muted mb-2">{{ order.screening.movie.director }} | {{ order.screening.movie.genre }}</p>
                        <p class="mb-2"><i class="fas fa-clock me-1"></i>时长：{{ order.screening.movie.duration }}分钟</p>
                        <p class="mb-2"><i class="fas fa-calendar me-1"></i>场次：{{ order.screening.start_time|date:"Y年m月d日 H:i" }}</p>
                        <p class="mb-2"><i class="fas fa-building me-1"></i>影厅：{{ order.screening.hall.name }} ({{ order.screening.hall.hall_type }})</p>
                        <p class="mb-0"><i class="fas fa-yen-sign me-1"></i>票价：¥{{ order.screening.price }}</p>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 座位信息 -->
        <div class="card mb-4">
            <div class="card-header">
                <h5 class="mb-0"><i class="fas fa-chair me-2"></i>座位信息</h5>
            </div>
            <div class="card-body">
                <div class="row">
                    {% for seat in order.seats.all %}
                        <div class="col-md-2 col-sm-3 col-4 mb-2">
                            <div class="seat selected text-center">
                                {{ seat.seat_number }}
                            </div>
                        </div>
                    {% endfor %}
                </div>
            </div>
        </div>
        
        <!-- 操作按钮 -->
        <div class="card">
            <div class="card-body text-center">
                {% if order.status == 'pending' %}
                    <form method="post" class="d-inline me-2">
                        {% csrf_token %}
                        <input type="hidden" name="action" value="pay">
                        <button type="submit" class="btn btn-success btn-lg">
                            <i class="fas fa-credit-card me-1"></i>立即支付
                        </button>
                    </form>
                    <form method="post" class="d-inline">
                        {% csrf_token %}
                        <input type="hidden" name="action" value="cancel">
                        <button type="submit" class="btn btn-danger btn-lg" onclick="return confirm('确定要取消订单吗？')">
                            <i class="fas fa-times me-1"></i>取消订单
                        </button>
                    </form>
                {% elif order.status == 'paid' %}
                    <div class="alert alert-success">
                        <i class="fas fa-check-circle me-2"></i>订单已支付，请按时观影！
                    </div>
                {% elif order.status == 'completed' %}
                    <div class="alert alert-info">
                        <i class="fas fa-check-circle me-2"></i>观影完成，感谢您的光临！
                    </div>
                {% else %}
                    <div class="alert alert-secondary">
                        <i class="fas fa-times-circle me-2"></i>订单已取消
                    </div>
                {% endif %}
                
                <div class="mt-3">
                    <a href="{% url 'profile' %}" class="btn btn-outline-primary">
                        <i class="fas fa-arrow-left me-1"></i>返回个人中心
                    </a>
                    <a href="{% url 'movie_list' %}" class="btn btn-outline-success ms-2">
                        <i class="fas fa-film me-1"></i>继续购票
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %} 